<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>轮播图展示效果</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            background: #84a8ff;
        }
        a, #toLeft, #toRight{
            cursor: pointer;
        }
        .v_show{
            border:3px outset #3b4147;
            padding: 10px;
            height: auto;
        }
        .highLight{
            color: red;
            background: #00ff43
        }
        .v_content{
            overflow: hidden;
            position: relative;
            border:6px inset #ffcb03;
            white-space: nowrap;
            width: 100%;
            padding-top: 5px;
        }
        .v_content_list{
            position: relative;
            /*border:3px solid #ffa900;*/
        }
        ul{
            /*ul边框不一定要包住所有li元素，一样可以左右移动！*/
            padding: 0;
        }
        ul li{
            list-style: none;
            display: inline-block;
            padding-left: 5px;
        }

        ul li img{
            /*width: 266px;*/

        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <br>
    <h1>轮播图展示效果</h1>
    <hr>
    <br>
    <div class="v_show" >
            <div class="v_caption">
                <b>轮播图演示</b>&nbsp;&nbsp;
                <span class="glyphicon glyphicon-unchecked highLight"></span>
                <span class="glyphicon glyphicon-unchecked"></span>
                <span class="glyphicon glyphicon-unchecked"></span>
                &nbsp;&nbsp;
                <span class="glyphicon glyphicon-chevron-left" id="toLeft"></span>
                <span class="glyphicon glyphicon-chevron-right" id="toRight"></span>
                <hr>
            </div>
            <div class="v_content">
                <div class="v_content_list" >
                    <ul>
                        <li><a><img class="img-thumbnail img-responsive" src="img/010.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/08435812.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/08435821.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/08435816.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/20070715160833677.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/20070715160837445.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/20070715160838856.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/20070715160840887.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/Apple.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/VPC%2520Graphiite.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                        <li><a><img class="img-thumbnail img-responsive" src="img/SnowMan.png"></a><h4>地球</h4><span>播放：<em>2,634</em></span></li>
                    </ul>
                </div>
            </div>
    </div>
<!--
    <div style="height: 500px"></div>&lt;!&ndash;&ndash;&gt;
-->
</div>
<script>
$(function () {

    var $img = $("ul li img");
    $img.css("width",$(".v_content").width()/4-10);
    $(window).resize(function(){
        $("ul li img").css("width",$(".v_content").width()/4-10);
    });
    var page = 1;
    var picsPerPage = 4;

    $("#toRight").click(function() {

        var $parents = $(this).parents("div.v_show");
        var $v_width = $parents.find("div.v_content").width();
        var $v_list = $parents.find("div.v_content_list");
        var liNumber = $(".v_show").find("li").length;
        var pageCount = Math.ceil(liNumber / picsPerPage);
//        alert(pageCount)

        if (!$v_list.is(":animated")) {
            if (page == pageCount) {
                $v_list.animate({"left": 0},"slow");
                page = 1;
            } else {
                $v_list.animate({left: "-=" + $v_width}, "normal");
                page++;
            }
            $(".glyphicon-unchecked").eq(page - 1).addClass("highLight").siblings().removeClass("highLight")
        }
    })
    $("#toLeft").click(function() {

        var $parents = $(this).parents("div.v_show");
        var $v_width = $parents.find("div.v_content").width();
        var $v_list = $parents.find("div.v_content_list");
        var liNumber = $(".v_show").find("li").length;
        var pageCount = Math.ceil(liNumber / picsPerPage);
//        alert(pageCount)

        if (!$v_list.is(":animated")) {
            if (page == 1) {
                $v_list.animate({"left": -(pageCount-1)*$v_width},"slow");
                page = pageCount;
            } else {
                $v_list.animate({left: "+=" + $v_width}, "normal");
                page--;
            }
            $(".glyphicon-unchecked").eq(page - 1).addClass("highLight").siblings().removeClass("highLight")
        }
    })
})

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>